<script setup>
import { ElMessage } from 'element-plus'
import { inject, ref } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'

import ContactButton from '@/components/common/ContactButton.vue'

const user = inject('user')
const menus = inject('userMenus')
const logout = inject('logout')
const showContact = ref(window.__SITE_CONFIG__.showContact)

onBeforeRouteLeave((to, from, next) => {
  if (to.name === 'userCharge') {
    ElMessage.warning('充值页面暂未开放～')
    next(false)
  }
  next()
})
</script>

<template>
  <div class="text-[--el-text-color-primary]">
    <!-- 头部 -->
    <div class="flex items-center w-full px-3 py-5 rounded">
      <el-avatar :size="64" class="rounded-full mr-2 shadow" :src="user.avatar" />
      <div class="flex-1 ml-2 mr-12 space-y-1">
        <div class="flex items-center">
          <span class="text-xl font-bold">{{ user.nickname || '未设置昵称' }}</span>
        </div>
        <div class="text-sm text-[--el-text-color-secondary]">
          {{ user.mobile }}
        </div>
      </div>
    </div>
    <!-- 卡片-->
    <div class="flex justify-between mt-2 px-3">
      <RouterLink
        :to="{ name: 'userCharge', query: { type: 'score' } }"
        class="flex justify-between items-center relative space-y-1 px-4 py-2 w-[47.5%] rounded-lg bg-gradient-to-bl from-[--el-color-warning-light-5] to-[--el-color-warning-light-8] shadow-sm shadow-[--el-color-warning-light-5]"
      >
        <div class="absolute bottom-0 right-0 -z-0">
          <FontAwesomeIcon icon="coins" class="text-[--el-color-warning-light-7]" size="3x" />
        </div>
        <div class="text-[--el-color-warning] z-[1] text-xl">积分</div>
        <div class="text-gray-50 text-2xl z-[1]">
          <span class="">{{ user.score }}</span>
        </div>
      </RouterLink>
      <RouterLink
        :to="{ name: 'userCharge', query: { type: 'vip' } }"
        class="flex justify-between items-center relative space-y-1 px-4 py-2 w-[47.5%] rounded-lg bg-gradient-to-bl from-[--el-color-danger-light-5] to-[--el-color-danger-light-8] shadow-sm shadow-[--el-color-danger-light-5]"
      >
        <div class="absolute bottom-0 right-0 -z-0">
          <FontAwesomeIcon icon="crown" class="text-[--el-color-danger-light-7]" size="3x" />
        </div>
        <div class="text-[--el-color-danger] z-[1] text-xl">VIP</div>
        <div class="text-gray-50 text-2xl z-[1]">
          <span v-if="!user.vip">未开通</span>
          <span v-else>{{ user.vip_expire }}</span>
        </div>
      </RouterLink>
    </div>
    <!-- 菜单 -->
    <div class="flex flex-col mt-4 px-4 space-y-1">
      <template v-for="menu in menus" :key="menu.name">
        <RouterLink :to="{ name: menu.name }" class="menu-item">
          <div class="flex items-center space-x-4">
            <div class="w-5 text-center">
              <FontAwesomeIcon :icon="menu.icon" />
            </div>
            <div class="">{{ menu.title }}</div>
          </div>
          <div class="text-[--el-text-color-placeholder]">
            <FontAwesomeIcon icon="angle-right" />
          </div>
        </RouterLink>
      </template>
      <ContactButton class="menu-item" @click="logout">
        <div class="flex items-center space-x-4">
          <div class="w-5 text-center">
            <FontAwesomeIcon icon="headphones-alt" />
          </div>
          <div class="">联系客服</div>
        </div>
        <div class="text-[--el-text-color-placeholder]">
          <FontAwesomeIcon icon="angle-right" />
        </div>
      </ContactButton>
      <div class="menu-item" @click="logout">
        <div class="flex items-center space-x-4">
          <div class="w-5 text-center">
            <FontAwesomeIcon icon="sign-out-alt" />
          </div>
          <div class="">登出账户</div>
        </div>
        <div class="text-[--el-text-color-placeholder]">
          <FontAwesomeIcon icon="angle-right" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(.menu-item) {
  @apply flex justify-between items-center py-4 border-b border-b-[--el-border-color-extra-light] last:border-b-0;
}
</style>
